<template>
    <view class="historyRanking">
        <view style="height: 20rpx; background-color: #e0ede9; width: 100%"></view>
        <view
            class="historyRanking-top"
            style="background-color: #e0ede9; padding: 0 30rpx 60rpx; box-sizing: border-box"
        >
            <view class="selent" style="margin-right: 78rpx">
                <picker @change="bindPickerChange" :value="index" :range="array">
                    <view class="selent-title">
                        {{ array[index] }}
                        <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/bottom.png" mode=""></image>
                    </view>
                </picker>
            </view>
            <view class="selent" v-if="index == 0">
                <view class="selent-title">
                    <dyDatePicker
                        @getData="getData"
                        :max-select="maxPickerDay"
                        placeholder="请选择日期"
                        :childValue="Startdate"
                    ></dyDatePicker>
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/bottom.png" mode=""></image>
                </view>
            </view>

            <view class="selent" v-if="index == 1">
                <view class="selent-title" style="margin-right: 30rpx">
                    <picker :range="weekList" @change="weekchange" :value="weekindex">
                        <view>{{ Startdate + '~' + Enddate }}</view>
                    </picker>
                    <!-- <dyDatePicker placeholder="起始日期" :childValue="Startdate" @getData="getFromData"></dyDatePicker> -->

                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/bottom.png" mode=""></image>
                </view>
                <!-- <view class="selent-title" >  <dyDatePicker placeholder="结束日期"  :childValue="Enddate" @getData="getToData"></dyDatePicker><image src="../../static/img/bottom.png" mode=""></image></view> -->
            </view>
            <view class="selent" v-if="index == 2">
                <view class="selent-title">
                    <dyDatePicker
                        timeType="month"
                        :max-select="maxPickerMonth"
                        @getData="getData"
                        placeholder="请选择日期"
                        :childValue="monthDate"
                    >
                    </dyDatePicker>
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/bottom.png" mode=""></image>
                </view>
            </view>
        </view>

        <view
            class="rank_content"
            style="height: calc(100vh - 50rpx); border-radius: 24rpx 24rpx 0 0; background: #fff; margin-top: -30rpx"
        >
            <block v-for="(item, index) in rankList" :key="index">
                <!-- active -->
                <view class="rank_item">
                    <view class="rank_title"
                        ><text class="rank-num"> {{ index + 1 }}</text>
                        <image :src="item.avatarAbsolute" mode="" style="border-radius: 50%"></image
                        ><text class="rank_name">{{ item.userName }}</text>
                    </view>
                    <view class="rankRight" v-if="rankType == 0">
                        <text v-if="index == 0">+{{ weightsysconfig.dayWeightLossRankingReward }}积分</text>
                        <text v-if="index == 1">+{{ weightsysconfig.twoDayWeightLossRankingReward }}积分</text>
                        <text v-if="index == 2">+{{ weightsysconfig.threeDayWeightLossRankingReward }}积分</text>
                        <text v-if="index > 2" style="border: none; background: none"></text>
                        <view class="rankRightKg">{{ item.weightLoss }}kg</view>
                    </view>
                    <view class="rankRight" v-if="rankType == 2">
                        <text v-if="index == 0">+{{ weightsysconfig.monthWeightLossRankingReward }}积分</text>
                        <text v-if="index == 1">+{{ weightsysconfig.twoMonthWeightLossRankingReward }}积分</text>
                        <text v-if="index == 2">+{{ weightsysconfig.threeMonthWeightLossRankingReward }}积分</text>
                        <text v-if="index > 2" style="border: none; background: none"></text>
                        <view class="rankRightKg">{{ item.weightLoss }}kg</view>
                    </view>
                    <view class="rankRight" v-if="rankType == 1">
                        <text v-if="index == 0">+{{ weightsysconfig.weekWeightLossRankingReward }}积分</text>
                        <text v-if="index == 1">+{{ weightsysconfig.twoWeekWeightLossRankingReward }}积分</text>
                        <text v-if="index == 2">+{{ weightsysconfig.threeWeekWeightLossRankingReward }}积分</text>
                        <text v-if="index > 2" style="border: none; background: none"></text>
                        <view class="rankRightKg">{{ item.weightLoss }}kg</view>
                    </view>
                </view>
                <view v-if="rankList.length > 0" class="rank_item active">
                    <view class="rank_title"
                        ><text class="rank-num"> {{ currentUserData.weightLossRanking || '~' }}</text>
                        <image
                            :src="currentUserData.avatarAbsolute || userDetail.avatarAbsolute"
                            mode=""
                            style="border-radius: 50%"
                        ></image
                        ><text class="rank_name">{{ currentUserData.userName || userDetail.name || '' }}</text>
                    </view>
                    <view class="rankRight" v-if="rankType == 0">
                        <text v-if="currentUserData.weightLossRanking == 1"
                            >+{{ weightsysconfig.dayWeightLossRankingReward }}积分</text
                        >
                        <text v-if="currentUserData.weightLossRanking == 2"
                            >+{{ weightsysconfig.twoDayWeightLossRankingReward }}积分</text
                        >
                        <text v-if="currentUserData.weightLossRanking == 3"
                            >+{{ weightsysconfig.threeDayWeightLossRankingReward }}积分</text
                        >
                        {{ currentUserData.weightLoss || 0 }}kg
                    </view>
                    <view class="rankRight" v-if="rankType == 2">
                        <text v-if="currentUserData.weightLossRanking == 1"
                            >+{{ weightsysconfig.monthWeightLossRankingReward }}积分</text
                        >
                        <text v-if="currentUserData.weightLossRanking == 2"
                            >+{{ weightsysconfig.twoMonthWeightLossRankingReward }}积分</text
                        >
                        <text v-if="currentUserData.weightLossRanking == 3"
                            >+{{ weightsysconfig.threeMonthWeightLossRankingReward }}积分</text
                        >
                        {{ currentUserData.weightLoss || 0 }}kg
                    </view>
                    <view class="rankRight" v-if="rankType == 1">
                        <text v-if="currentUserData.weightLossRanking == 1"
                            >+{{ weightsysconfig.weekWeightLossRankingReward }}积分</text
                        >
                        <text v-if="currentUserData.weightLossRanking == 2"
                            >+{{ weightsysconfig.twoWeekWeightLossRankingReward }}积分</text
                        >
                        <text v-if="currentUserData.weightLossRanking == 3"
                            >+{{ weightsysconfig.threeWeekWeightLossRankingReward }}积分</text
                        >
                        {{ currentUserData.weightLoss || 0 }}kg
                    </view>
                </view>
            </block>
        </view>
        <u-loadmore
            v-if="more"
            :status="status"
            loadingText="加载中"
            loadmoreText="上拉加载更多"
            nomoreText="已经到底啦～"
            fontSize="28"
            iconSize="30"
            marginTop="20"
            marginBottom="30"
        ></u-loadmore>
    </view>
</template>

<script>
import dyDatePicker from '../../components/dy-Date/dy-Date.vue';
export default {
    components: {
        dyDatePicker,
    },
    data() {
        return {
            maxPickerDay: this.helper.formatDate(new Date(new Date().getTime() - 24 * 60 * 60 * 1000)),
            maxPickerMonth: this.getCurrentMonth(),
            array: ['日排行', '周排行', '月排行'],
            index: 0,
            Startdate: this.helper.formatDate(new Date(new Date().getTime() - 24 * 60 * 60 * 1000)),
            Enddate: this.helper.formatDate(new Date(new Date().getTime() - 24 * 60 * 60 * 1000)),
            monthDate: this.getCurrentMonth(),
            weekindex: 1,
            pageNum: 1,
            pageSize: 8,
            isloading: false,
            total: 0,
            rankType: 0,
            rankList: [],
            weekList: [],
            userDetail: '',
            // startTime:'',
            // endTime:'',
            status: 'loadmore',
            more: false,
            currentUserData: {},
            weightsysconfig: '',
        };
    },
    onPullDownRefresh() {
        this.getRanking(true);
    },
    onReachBottom() {
        if (this.more == false) return;
        this.status = 'loading';
        this.pageNum = ++this.pageNum;
        this.getRanking(false);
    },
    onLoad() {
        let that = this;
        that.userDetail = uni.getStorageSync('userInfo');
        that.getRanking(true);
        that.getInte();
    },
    methods: {
        weekchange(e) {
            this.rankType = 1;
            this.weekindex = e.detail.value;
            this.Startdate = this.weekList[e.detail.value][0];
            this.Enddate = this.weekList[e.detail.value][1];
            this.getRanking(true);
        },

        bindPickerChange: function (e) {
            let that = this;
            (that.index = e.detail.value), (that.rankType = e.detail.value);
            that.rankList = [];
            if (e.detail.value == 0) {
                that.Startdate = this.helper.formatDate(new Date(new Date().getTime() - 24 * 60 * 60 * 1000));
                that.Enddate = this.helper.formatDate(new Date(new Date().getTime() - 24 * 60 * 60 * 1000));
            }
            if (e.detail.value == 2) {
                that.Startdate = that.getCurrentMonth();
                that.Enddate = that.getCurrentMonth();
            } else if (e.detail.value == 1) {
                // let currentDate=new Date()
                // let currentYear=currentDate.getFullYear()
                // let time = this.helper.getWeeksByYear(currentYear)
                // let weekIndex=this.getYearWeek(currentDate)-1
                // let lastWeek=time[weekIndex]
                // let tempweekList=[7,1,2,3,4,5,6]
                // if(weekIndex==0){
                // 	//查看1月1号是星期几
                // 	var _tempFirstDay=`${currentYear}-01-01`
                // 	var tempDate=new Date(_tempFirstDay)
                // 	var tempweek=tempweekList[tempDate.getDay()]
                // 	if(tempweek!=1){
                // 		var tempPreDay=31-tempweek
                // 		var tempEndDay=7-tempweek+1
                // 		this.Startdate=`${currentYear-1}-12-${tempPreDay}`
                // 		this.Enddate=`${currentYear}-01-${tempEndDay}`
                // 	}else{
                // 		this.Startdate=lastWeek[0]
                // 		this.Enddate=lastWeek[6]
                // 	}
                // }else{
                // 	this.Startdate=lastWeek[0]
                // 	this.Enddate=lastWeek[6]
                // }
                let currentDate = new Date();
                let weekDay = currentDate.getDay(); //从 Date 对象返回一周中的某一天 (0 ~ 6)。周日是0
                if (weekDay === 0) {
                    weekDay = 7;
                }
                //从上周开始
                this.Startdate = this.helper.formatDate(
                    new Date(currentDate.getTime() - (weekDay - 1 + 7) * 24 * 60 * 60 * 1000),
                );
                this.Enddate = this.helper.formatDate(
                    new Date(currentDate.getTime() + (7 - weekDay - 7) * 24 * 60 * 60 * 1000),
                );
                if (this.weekList.length == 0) {
                    this.weekList.unshift([this.Startdate, this.Enddate]);
                    //生成前100周数据
                    let currentStart = new Date(this.Startdate).getTime();
                    for (let i = 0; i <= 150; i++) {
                        const start = this.helper.formatDate(new Date(currentStart - 7 * 24 * 60 * 60 * 1000));
                        const end2 = this.helper.formatDate(new Date(currentStart - 1 * 24 * 60 * 60 * 1000));
                        currentStart = new Date(start).getTime();
                        this.weekList.unshift([start, end2]);
                    }
                }
                this.weekindex = this.weekList.length - 1;
            }
            that.getRanking(true);
        },
        getRanking(isFresh) {
            if (isFresh) {
                this.pageNum = 1;
                this.pageSize = 20;
            }
            let data = {
                startRecordDate: this.Startdate,
                endRecordDate: this.Enddate,
                rankType: this.rankType,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                orderByColumn: 'weightLossRanking',
                // isAsc: 'descending'
            };
            this.request.httpTokenRequest('/mp-api/wx/weight/rankList', data, 'POST', true).then((res) => {
                uni.stopPullDownRefresh();
                if (res.code == 0) {
                    if (res.data.params) {
                        this.currentUserData = res.data.params;
                    }
                    if (res.data.list && isFresh) {
                        this.rankList = res.data.list;
                    } else {
                        res.data.list.forEach((item) => {
                            this.rankList.push(item);
                        });
                    }
                    if (res.data.total > this.rankList.length) {
                        this.status = 'loadmore';
                        this.more = true;
                    } else {
                        this.more = false;
                        this.status = 'nomore';
                    }
                } else {
                    this.more = false;
                    this.status = 'nomore';
                }
            });
        },
        getInte() {
            this.request.httpTokenRequest('/mp-api/wx/config/sysconfig', null, 'POST', true).then((res) => {
                if (res.code == 0) {
                    this.weightsysconfig = res.data;
                }
            });
        },
        getFromData(e) {
            this.rankList = [];
            this.Startdate = e;
            this.getRanking(true);
        },
        getToData(e) {
            this.rankList = [];
            this.Enddate = e;
            this.getRanking(true);
        },
        getData(e) {
            this.rankList = [];
            this.Startdate = e;
            this.Enddate = e;
            this.getRanking(true);
        },
        getCurrentMonth() {
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth();
            month = month > 9 ? month : '0' + month;
            return `${year}-${month}`;
        },
        getYearWeek(val) {
            const year = val.getFullYear(); //获取年
            const month = val.getMonth() + 1; //获取月
            const day = val.getDate(); //获取天
            const isLeapYear = year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0); //判断是否为闰年
            const second = isLeapYear ? 29 : 28;
            const monthList = [31, second, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31].splice(0, month - 1); //获取月份数组
            let currentDays; //当前日期天数
            let currentWeek; //当前周数
            //计算天数
            currentDays =
                month === 1
                    ? day
                    : monthList.reduce((t, v) => {
                          return t + v;
                      }, 0) + day;
            //计算是第几周
            currentWeek = currentDays % 7 === 0 ? currentDays / 7 : Math.ceil(currentDays / 7);
            return currentWeek;

            // var data1=new Date(a,parseInt(b)-1,c)
            // var data2=new Date(a,0,1)
            // var d=Math.round((data1.valueOf()-data2.valueOf())/86400000)

            // return Math.ceil((d+data2.getDay()+1-1)/7)
        },
    },
};
</script>

<style lang="scss" scoped>
body,
.historyRanking {
    min-height: 100vh;
    height: 100%;
    position: relative;
}

uni-page-body,
html {
    max-height: 100%;
}

.rank_content {
    background: -webkit-linear-gradient(to top, #e0ede9, #fff);
}
</style>
